<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo · 2021-04-02</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.0.4/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      body {
        user-select: none;
      }

      .card {
        margin-bottom: 20px;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #ccc;
      }

      button {
        background-color: #eee;
        padding: 6px 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        outline: none;
      }

      button:focus {
        outline: none;
      }
    </style>
  </head>
  <body>
    <h1 class="text-4xl my-7 text-center text-blue-500">JQuery</h1>
    <main class="w-96 my-0 mx-auto p-8 border rounded-lg shadow-sm">
      <div class="card shadow">
        <h3 class="text-center mb-3">💅🏾 选择器</h3>
        <ul class="list list-disc ml-6">
          <li>item-1</li>
          <li title="title1">我是有 title 属性的 li</li>
          <li>item-3</li>
        </ul>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.</p>
        <button class="w-full btn-click mt-2 focus:ring shadow-md">
          Button
        </button>
        <button class="w-full btn2-click mt-2 focus:ring shadow-md">
          相邻 ul+p
        </button>
        <button class="w-full btn3-click mt-2 focus:ring shadow-md">
          同辈 ul~p
        </button>
        <button class="w-full btn4-click mt-2 focus:ring shadow-md">
          属性 [title="title1"]
        </button>
      </div>
    </main>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      // $(document).ready(() => {
      //     alert('Hello JQuery!');
      // });

      // 等价于 👇

      // $(() => {
      //     alert('Hello JQuery!');
      // })

      $(() => {
        const color = {
          red: "#ff4757",
          green: "#20bf6b",
          blue: "#0984e3",
          yellow: "#ffc312",
        };

        $(".btn-click").click(function () {
          $(this).css({
            background: color.red,
            color: "#fff",
          });
        });

        $(".btn2-click").click(function () {
          $(".list+p").css({
            background: color.blue,
            color: "#fff",
          });
        });

        $(".btn3-click").click(function () {
          $(".list~p").css({
            background: color.green,
            color: "#fff",
          });
        });

        $(".btn4-click").click(function () {
          $('[title="title1"]').css({
            background: color.yellow,
          });
        });
      });
    </script>
  </body>
</html>
